<template>
  <div class="customer">
    <el-form class="boss-form" inline ref="form">
      <el-form-item label="供应商名称">
        <el-input class="boss_input" v-model='customerData.search.supplierName' placeholder="请输入供应商名称">
        </el-input>
      </el-form-item>
      <el-form-item label="账号">
        <el-input class="boss_input" v-model='customerData.search.supplierAccount' placeholder="请输入账号">
        </el-input>
      </el-form-item>
      <el-form-item>
        <Button label="重置" @click="onResetClick" />
        <Button label="搜索" type="primary" @click="onSearchClick" />
      </el-form-item>
    </el-form>

    <div class="outerTable">
      <el-tabs type="card" v-model="customerData.search.memberAuditStatus" @tab-click="onTabClick">
        <el-tab-pane label="待审核" name="AUDITING"></el-tab-pane>
        <el-tab-pane label="已通过" name="PASS"></el-tab-pane>
        <el-tab-pane label="已驳回" name="REJECTED"></el-tab-pane>
      </el-tabs>

      <el-table ref="tableRef" :height="tableHeight" :data="customerData.list" v-loading="loading">
        <el-table-column fixed="left" type="index" label="序号" width="120" />
        <el-table-column label="供应商名称" prop="supplierName" />
        <el-table-column label="登录账号" prop="contactPhone" />
        <el-table-column label="申请时间" prop="memberApplyTime">
          <template #default="{row}">
            {{ formater.formatDate(row.memberApplyTime) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="130">
          <template #default="{row}">
            <Link v-show="customerData.search.memberAuditStatus === 'AUDITING'"
                  @click="onExamineClick(row)" label="审核" :underline="false" />
            <Link v-show="customerData.search.memberAuditStatus === 'PASS'"
                  @click="onRecordClick(row)" label="审核记录" :underline="false" />
            <Link v-show="customerData.search.memberAuditStatus === 'REJECTED'"
                  @click="onRejectClick(row)" label="驳回理由" :underline="false" />
          </template>
        </el-table-column>
      </el-table>
      <Pager :page="customerData.search.page" :pageSizes="customerData.search.pageSizes" :total="customerData.total"
             :limit="customerData.search.limit" @current-change="onCurrentChange" @size-change="onSizeChange" />
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import formater from '@/formater'
import consts from '@/consts'
import { calcTableHeight } from '@/assets/js/utils.js'
import Pager from '@/components/pager/index.vue'
import Link from '@/components/button/link.vue'
import Button from '@/components/button/button.vue'

const { tableRef, tableHeight } = calcTableHeight()

const router = useRouter()
const route = useRoute()

const customerData = reactive({
  total: 0,
  list: [],
  search: {
    supplierAccount: '',
    supplierName: '',
    page: 1,
    limit: consts.Limit,
    pageSizes: consts.PageSize,
    memberAuditStatus: 'AUDITING' // 1已通过  PASS(1),  2审核中 AUDITING 3被驳回 REJECTED 待审核 WAITING_AUDIT
  }
})
const loading = ref(false)

const onTabClick = (tab) => {
  customerData.search.supplierAccount = ''
  customerData.search.supplierName = ''
  customerData.search.memberAuditStatus = tab.props.name
  loadData()
}

const onSearchClick = () => {
  customerData.search.page = 1
  loadData()
}

const onResetClick = () => {
  customerData.search.supplierAccount = ''
  customerData.search.supplierName = ''
  customerData.search.page = 1
  loadData()
}

// 审核
const onExamineClick = (row) => {
  let { href } = router.resolve({
    path: `/supplier/memberExaminer/${row.supplierId}/${row.memberAuditStatus}`
  })
  window.open(href, '_blank')
}

// 审核记录
const onRecordClick = (row) => {
  let { href } = router.resolve({
    path: `/supplier/memberExaminer/${row.supplierId}/${row.memberAuditStatus}`
  })
  window.open(href, '_blank')
}

// 驳回
const onRejectClick = (row) => {
  let { href } = router.resolve({
    path: `/supplier/memberExaminer/${row.supplierId}/${row.memberAuditStatus}`
  })
  window.open(href, '_blank')
}

// 当前页变化时触发
const onCurrentChange = (val) => {
  customerData.search.page = val
  loadData()
}

// 每页显示条数变化时触发
const onSizeChange = (val) => {
  customerData.search.limit = val
  loadData()
}

const loadData = async () => {
  loading.value = true
  let { data, err } = await api.get('/medinstrument/boss/supplier/list', customerData.search)
  if (err) {
    ElMessage.error(err)
    loading.value = false
    return
  }
  customerData.list = data.list
  customerData.total = data.count
  loading.value = false
}

onMounted(async () => {
  loadData()
})
</script>
